<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
  <script type="text/javascript" src="./lib/jquery.js"></script>
  <script type="text/javascript">
    // $.ajax({
    //   type: 'get',
    //   url: 'http://www.liulongbin.top:3006/api/getbooks',
    //   success: function (res) {
    //     console.log(res)
    //   }
    // })
    
    /*
      {
        id: 1,
        bookname: '西游记'
      }
      把对象转换为字符串
      id=1&bookname=西游记
     */
    function handleParam (obj) {
      var params = obj
      var pstr = ''
      // 把对象转换为字符串
      // data: {
      //   id: 1,
      //   bookname: 'hello'
      // }
      // 把上面的对象转成下面的字符串
      // id=1&bookname=hello&
      for (var key in params) {
        var k = key // 对象的属性名称 id bookname
        var v = params[k] // 对象的属性值 1 hello
        // console.log(k, v) // id 1  bookname hello
        pstr += k + '=' + v + '&'
      }
      // 去掉最后一个&符号
      if (pstr.length > 0 && pstr.lastIndexOf('&') === pstr.length - 1) {
        // pstr字符串存在信息并且最后一个字符是 &
        pstr = pstr.substr(0, pstr.length - 1)
      }
      // id=1&bookname=西游记
      return pstr
    }
    
    function ajax (options) {
      // 1、创建xhr对象
      var xhr = new XMLHttpRequest()
      // 处理get请求参数(把对象形式的参数转换为字符串)
      var pstr = handleParam(options.data)
      if (options.type === 'get') {
        options.url += '?' + pstr
      }
      // 2、准备请求参数
      xhr.open(options.type, options.url)
      // 3、触发请求
      if (options.type === 'get') {
        xhr.send(null)
      } else if (options.type === 'post') {
        // post请求需要设置请求头(需要在xhr.open之后，xhr.send之前)
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
        // post提交的数据需要用如下方式发送
        xhr.send(pstr)
      }
      // 4、监听服务器数据返回
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          // 服务端返回的原始数据是字符串
          var res = xhr.responseText
          var obj = JSON.parse(res)
          // 回调函数
          options.success(obj)
        }
      }
    }
    
    // ajax({
    //   type: 'post',
    //   data: {
    //     bookname: 'abc',
    //     author: 'abc',
    //     publisher: 'abc'
    //   },
    //   url: 'http://www.liulongbin.top:3006/api/addbook',
    //   success: function (res) {
    //     console.log(res)
    //   }
    // })

    // 1、异步的结果是如何通过回调函数得到的
    // 2、get请求参数是如何处理的
    // 3、post请求参数是如何处理的
    /*
    $.ajax({
      type: 'get',
      data: {
        id: 1,
        bookname: '西游记'
      },
      url: 'http://www.liulongbin.top:3006/api/getbooks',
      success: function (res) {
        console.log(res)
      }
    })
     */
    ajax({
      type: 'get',
      data: {
        id: 1,
        bookname: '西游记'
      },
      url: 'http://www.liulongbin.top:3006/api/getbooks',
      success: function (res) {
        console.log(res)
      }
    })
  </script>
</body>
</html>